<template>
  <div id="dialog">
    <el-dialog
      center
      title="添加商品"
      v-model="dialogVisible"
      width="50%"
      size="mini"
      destroy-on-close
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          height="600"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="商品名称" width="120">
            <template #default="scope">{{ scope.row.ProductName }}</template>
          </el-table-column>
          <el-table-column prop="price" label="商品价格" width="120">
            <template #default="scope"
              >￥{{ scope.row.SalePrice }}
              <span style="text-decoration: line-through"
                >￥{{ scope.row.SaleCounts }}</span
              ></template
            >
          </el-table-column>
          <el-table-column prop="img" label="图片" show-overflow-tooltip>
            <template #default="scope">
              <img
                style="width: 88px; height: 88px"
                :src="imgPic(scope.row.Pic)"
                alt=""
              />
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-form-item label="价格形式">
            <el-radio-group>
              <el-radio label="1">一口价</el-radio>
              <el-radio label="2">价格区间</el-radio>
              <el-radio label="3">显示折扣价</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="changeVisibility(false)">取消</el-button>
          <el-button @click="addShop" type="primary">添加</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { goWxProducts, addShopGood } from '@/service/main/main'
import { ElMessage } from 'element-plus'
export default defineComponent({
  async setup() {
    // 关闭弹窗
    let changeVisibility = (event: boolean) => {
      dialogVisible.value = event
    }
    //   处理//改变为/
    let imgPic = (item: string) => {
      let url: string = item
      let urlArr = url.split('//')
      //   console.log(urlArr[1])
      return urlArr[0] + urlArr[1] + '/' + urlArr[2]
    }
    const multipleTable = ref()
    onMounted(() => {
      return multipleTable
    })

    // 是否显示
    let dialogVisible = ref(false)
    let goWxProductsRes = await goWxProducts(1, 10, 1)
    let tableData = goWxProductsRes

    // 上传数组
    let ProductIdArr: number[] = []
    // 价格类型
    let type = 1
    let multipleSelection = ref(null)
    const handleSelectionChange = (val: any) => {
      ProductIdArr = []
      val.forEach((item: any) => ProductIdArr.push(item.ProductId))
      console.log(ProductIdArr)
      //   multipleSelection.value = val
    }
    // 取下全选
    const toggleSelection = (rows: any) => {
      if (rows) {
        rows.forEach((row: any) => {
          multipleTable.value.toggleRowSelection(row)
        })
      } else {
        multipleTable.value.clearSelection()
      }
    }

    const addShop = async () => {
      // 判断是否选择商品
      if (ProductIdArr.length == 0) {
        ElMessage({
          type: 'error',
          message: '请选择商品!',
        })
        return
      }
      let ProductIds = ProductIdArr
      const ProductRes = await addShopGood(ProductIds, type)

      if (ProductRes[0].code == 0) {
        ElMessage({
          type: 'success',
          message: '添加成功!',
        })
        changeVisibility(false)
      }
    }

    return {
      multipleTable,
      tableData,
      multipleSelection,
      dialogVisible,
      handleSelectionChange,
      goWxProductsRes,
      toggleSelection,
      imgPic,
      ProductIdArr,
      type,
      addShop,
      changeVisibility,
    }
  },
})
</script>

<style scoped></style>
